Wrap button and option text when content overflows#12
Merged
Conversation
The shared `.kma-button` rule used `white-space: nowrap` + a fixed height, so long MFA/SSO/sign-in option labels (e.g. "Get a verification code from the Google Authenticator app") overflowed the card. Switch buttons to `min-height` and `overflow-wrap: anywhere` so labels wrap and the row grows to fit. Extend two demo MFA options with longer labels so the wrapping case is exercised when scrubbing through States.
|
Firetiger deploy monitoring skipped This PR didn't match the auto-monitor filter configured on your GitHub connection:
Reason: PR modifies UI styling in managed-auth-react package, not kernel API endpoints or Temporal workflows as specified in the filter. To monitor this PR anyway, reply with |
Configures Vercel to build the library before the demo app and output from packages/demo/dist, so workspace:* dependency resolves correctly in CI. Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
1 task
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
.kma-buttonusedwhite-space: nowrapplus a fixedheight, so longMFA / SSO / sign-in option labels overflowed the card on narrower
viewports.
min-heightandoverflow-wrap: anywhereso labels wrapand the row grows to fit. Also added
padding+min-width: 0on.kma-sso-buttonso its label can shrink.Statestab →Awaiting Input — MFA only)with longer labels so the wrapping case is visible while scrubbing.
Before / After
Viewport
460x750,States→awaiting_input_mfa. The long totp label("Get a verification code from the Google Authenticator app") clipped
past the card on the right in the old build and now wraps cleanly to two
lines inside the row.
Test plan
bun run --filter '@onkernel/managed-auth-react' typecheckbun run --filter '@onkernel/managed-auth-react' buildbun run format:checkmfaOptionsrow now wraps inside the cardNote
Low Risk
Low risk styling-only changes that adjust button sizing/wrapping; main risk is minor visual layout shifts across consumers.
Overview
Prevents long MFA/SSO labels from overflowing narrow viewports by switching buttons from fixed
heighttomin-heightand enabling text wrapping viaoverflow-wrap: anywhere(removingwhite-space: nowrap).Tweaks SSO button layout to better accommodate wrapping (
paddingand new.kma-sso-button__label { min-width: 0; }), extends demo MFA mock labels to exercise the wrap case, and adds avercel.jsonto build the library + demo with Bun.Reviewed by Cursor Bugbot for commit fa3f32e. Bugbot is set up for automated code reviews on this repo. Configure here.